<template>
    <div id="app">
        <mt-swipe :auto="0">
            <mt-swipe-item v-for="(sowImg, index) in productInfo.sowImg" :key="index">
                <img v-if="!/\.mp4/.test(sowImg)"  class="broadcast-item-img" :src="sowImg">
                <video class="video" v-else controls>
                    <source :src="sowImg" type="video/mp4">
                </video>
            </mt-swipe-item>
        </mt-swipe>
        <div class="product-summary-container">
            <div class="product-summary-title">
                {{productInfo.introduction}}
            </div>
            <div class="product-summary-price">
                <span class="dp-price">¥{{productInfo.dpPrice}}起</span><span class="sc-price" v-if="productInfo.dpPrice != productInfo.scPrice">¥{{productInfo.scPrice}}</span>
            </div>
            <div class="product-post">运费：
                <span v-if="productInfo.isPostage">包邮</span>
                <span v-else>不包邮</span>
            </div>
        </div>
        <div class="split-line"></div>
        <div class="nominate-goods-tip">
            <span class="title">详情</span>
        </div>
        <div class="split-line"></div>
        <div class="product-detail product-detail-richtext" v-if="productInfo.productDetail" v-html="productInfo.productDetail"></div>
        <div class="split-line"></div>
        <div class="nominate-goods-tip">
            <span class="title">商家推荐</span>
        </div>
        <div class="split-line"></div>
        <div class="goods-container clearfix">
            <div class="goods-item-wrap" v-for="(goodsItem, index) in nominateGoods" :key="index">
                <div class="goods-item-padding">
                    <goods-item class="goods-item" :loading.sync="goodsItemLoading" @goodsItemDetail="openCart" @click="clickGoodsItemHandler" :goodsItem="goodsItem"></goods-item>
                </div>
            </div>
        </div>

        <div class="cart-bar">
            <div class="cart-btn-item" @click="goHome">
                <div class="icon-home cart-btn-icon"></div>
                <div class="icon-text">首页</div>
            </div>
            <div class="cart-btn-item" @click="goToCart">
                <div class="cart-count">{{ cartCount }}</div>
                <div class="icon-cart cart-btn-icon"></div>
                <div class="icon-text">购物车</div>
            </div>
            <div class="join-cart" @click="openCartModal('addCart')">加入购物车</div>
            <div class="moment-buy" @click="openCartModal('nowBuy')">立即购买</div>
        </div>
        <product-picker ref="productPicker" v-if="productPickerModal" :action-type="actionType" v-model="productPickerModal" @addCartSuccess="addCartSuccess" :goods-item-detail="goodsItemDetail"></product-picker>
    </div>
</template>

<script>
import utils from '@utils'
import { getProductDetail, addToCart, getCartCount, nominateGoods } from './api'
export default {
    name: 'app',
    mixins: [ utils.MixinBase ],
    data() {
        return {
            productInfo: {
                sowImg: [],
                productItems: [],
                id: null,
                code: null,
                name: '',
                productImg: '',
                scPrice: '',
                dpPrice: '',
                productDetail: '',
            },
            cartCount: 0,
            curCount: 1,
            actionType: '',
            nominateGoods: [],
            
            joinCartModalVisible: false,
            specs: [],
            productItemsObj: {},
            SKUResult: {},
            haveChangedId: [],

            productPickerModal: false,
            goodsItemDetail: null,

            goodsItemLoading: false
        }
    },
    computed:{
        curProductItem: function() {
            if(this.productItemsObj[this.haveChangedId.join(";")]) {
                return this.productItemsObj[this.haveChangedId.join(";")]
            } else {
                return {};
            }
        }
    },
    mounted() {
        this.$indicator.open({
            spinnerType: 'fading-circle',
            text: '加载中...'
        });
        this.wechatInit().then(()=> {
            this.init();
        }, ()=> {
            this.init();
        });
    },
    methods: {
        goHome() {
            utils.goToPage("index.html");
        },
        init() {
            var qsObj = utils.getQueryObject();
            getProductDetail({id: qsObj.id}).then((data) => {
                this.sowImg = data.sowImg;
                this.productInfo = data;
                this.$indicator.close();
                this.wechatConfigInit().then(() => {
                    var shareOptions = {
                        shareTitle: this.productInfo.name,
                        shareDesc: this.productInfo.introduction,
                        shareUrl: utils.createAuthLink("product_detail.html&id="+qsObj.id),
                        sharePic: this.productInfo.productImg
                    }
                    
                    utils.shareHandler({
                        type: 'timeLine',
                        ...shareOptions,
                        callBack: () => {
                            this.$toast("分享到朋友圈");
                        }
                    })

                    utils.shareHandler({
                        type: 'appMessage',
                        ...shareOptions,
                        callBack: () => {
                            this.$toast("分享给朋友");
                        }
                    })
                }).catch(err => {
                    console.log(err)
                })
            });
            getCartCount().then(data => {
                this.cartCount = data;
            });

            nominateGoods({id: qsObj.id}).then(data => {
                this.nominateGoods = data;
            });
        },
        
        openCartModal(actionType) {
            this.goodsItemDetail = this.productInfo;
            this.productPickerModal = true;
            this.actionType = actionType;
        },
        goToCart() {
            utils.goToPage("cart.html");
        },
        goToCheckOrder() {
            this.$refs["productPicker"].goToCheckOrder();
        },
        goToProductPage() {
            utils.goToPage('product.html');
        },
        clickGoodsItemHandler(goodsItem) {
            utils.goToPage("product_detail.html?id="+goodsItem.id);
        },
        cartModalChange(val) {
            if(val) {
                document.body.style.overflow="hidden";
            } else {
                document.body.style.overflow="auto";
            }
        },
        openCart(goodsItem) {
            this.goodsItemDetail = goodsItem;
            this.productPickerModal = true;
        },
        addCartSuccess() {
            if(this.actionType == "addCart") {
                getCartCount().then(data => {
                    this.cartCount = data;
                });
            } else {
                this.goToCheckOrder();
            }
        }
    }
}
</script>

<style scoped>
.broadcast-item-img {
    display: inline-block;
    height: 300px;
    width: 100%;
}
.video {
    width: 100%;
    height: 100%;
}
.mint-swipe {
    text-align: center;
}
/deep/.mint-swipe .mint-swipe-items-wrap {
    height: 300px;
}
.product-summary-container {
    font-size: 18px;
    line-height: 20px;
    padding: 6px 10px;
    color: #292929;
}
.product-summary-container .product-summary-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-summary-container .product-summary-title,.product-summary-container .product-summary-price{
    font-size: 12px;
    margin-top: 4px;
}

.product-summary-container .product-summary-price .dp-price {
    color: red;
    font-size: 12px;
}
.product-summary-container .product-summary-price .sc-price {
    margin-left: 10px;
    font-size: 11px;
    color: #666;
    text-decoration: line-through;
}

.product-post {
    color: #8a8a8a;
}

.nominate-goods-tip {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.nominate-goods-tip .title {
    font-size: 13px;
    font-weight: bold;
    background: #fff;
    padding-left: 10px;
}
.nominate-goods-tip::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 2px;
    background: red;
    transform: translateY(-50%);
    left: 0;
    top: 50%;
}
.goods-container {
    padding: 6px 3px;
}
.goods-item-wrap {
    float: left;
    width: 50%;
}
.goods-item-padding {
    padding: 0 3px;
}
.goods-item {
    background: #efefef;
}

.product-detail img {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-bar {
  position: fixed;
  bottom: 0;
  height: 36px;
  padding: 7px 0;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgb(247 247 247 / 80%);
}

.cart-bar:before{
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  background: #ccc;
  width: 100%;
  height: 1px; 
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.cart-btn-item {
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.cart-btn-icon {
  font-size: 18px;
}
.icon-text {
  font-size: 10px;
}
.cart-count {
  display: flex;
  position: absolute;
  right: 0;
  top: 2px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  background: #fe0000;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.join-cart {
  color: #fff;
  font-size: 14px;
  background: #e70011;
  width: 100px;
  text-align: center;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.moment-buy {
  color: #fff;
  font-size: 14px;
  background: #be0412;
  width: 100px;
  text-align: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.product-info {
    width: 100%;
    display: flex;
    position: relative;
}
.icon-close {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 26px;
    color: #666;
}
.product-info .product-image {
    width: 2.8rem;
    height: 2.4rem;
    position: relative;
}
.product-info .product-image img {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    left: 6px;
    bottom: 7px;
    border-radius: 4px;
    box-shadow: 0 0 1px rgba(0,0,0,.5);
}
.product-info .product-tip {
    flex: 1;
    padding-left: 10px;
    position: relative;
}
.product-price {
    padding-top: 16px;
    font-size: 16px;
    color: red;
}
.product-detail-richtext {
    padding: 4px;
}
.product-detail {
    font-size: 14px;
    color: #666;
}
.specs-item {
    padding: 6px 0 12px 0;
}
.specs-item:not(:last-child) {
    margin-bottom: 1px;
}
.specs-item-button {
    margin-right: 6px;
    border-radius: 4px;
    display: inline-block;
    padding: 6px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0,0,0,.2);
    min-width: 30px;
}
.specs-item-name {
    height: 30px;
    line-height: 30px;
}
.specs-container {
    padding-left: 10px;
    background: #fff;
}

.product-num {
    padding: 10px;
    display: flex;
    font-size: 14px;
}

.product-num .tip {
    width: 100px;
    padding: 4px 0;
}

.confirm-btn {
    width: 100%;
    height: 44px;
    background: #dd3022;
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mint-popup-4 {
    width: 100%;
}
.active {
    background: red;
    color: #fff;
}
.disabled {
    background: #eee;
}
.normal {
    background: #fff;
}
</style>
